<template>
  <div class="container-content detail">
    <div
      class="detail-bg"
      :style="{ background: $store.state.settings.theme }"
    ></div>
    <div class="detail-container">
      <el-row>
        <el-col :span="24">
          <h3 class="panel-title">员工档案</h3>
        </el-col>
      </el-row>
      <el-descriptions
        class="margin-top"
        title="带边框列表"
        :column="3"
        :size="size"
        border
      >
        <template slot="extra">
          <el-button
            type="primary"
            size="small"
            icon="el-icon-edit"
            plain
          ></el-button>
          <el-button
            type="danger"
            size="small"
            icon="el-icon-delete"
            plain
          ></el-button>
        </template>
        <el-descriptions-item>
          <template slot="label"> 组织名称 </template>
          kooriookami
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 部门名称 </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 岗位名称 </template>
          苏州市
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 姓名 </template>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 状态 </template>
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 工号 </template>
        </el-descriptions-item>
      </el-descriptions>
      <div class="desc-title">家庭成员及主要社会关系</div>
      <el-table
        :data="formObject.userMajorSocialRelationEntities"
        style="width: 100%"
        highlight-current-row
        border
      >
        <el-table-column label="序号" type="index"></el-table-column>
        <el-table-column label="姓名" width="150" prop="userName">
        </el-table-column>
        <el-table-column label="关系" prop="relation"> </el-table-column>

        <el-table-column label="出生日期" prop="birthDate"> </el-table-column>
        <el-table-column label="职务" prop="position"> </el-table-column>
        <el-table-column label="电话" prop="tel"> </el-table-column>
        <el-table-column label="通讯地址" prop="address"> </el-table-column>
      </el-table>
      <div class="desc-title">教育经历</div>
      <el-table
        :data="formObject.userEducationalEntities"
        style="width: 100%"
        highlight-current-row
        border
      >
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column label="学习年限" width="150"> </el-table-column>
        <el-table-column label="学历" prop="educational"> </el-table-column>
        <el-table-column
          label="学历性质"
          prop="educationalAttr"
        ></el-table-column>
        <el-table-column label="毕业院校" prop="graduationInstitution">
        </el-table-column>
        <el-table-column label="专业" prop="major"> </el-table-column>
        <el-table-column label="证书" prop="certificate"> </el-table-column>
      </el-table>
      <div class="desc-title">工作经历</div>
      <el-table
        :data="formObject.userWorkExperienceEntities"
        style="width: 100%"
        highlight-current-row
        border
      >
        <el-table-column label="序号" prop="index" width="50"></el-table-column>
        <el-table-column label="工作年限"> </el-table-column>
        <el-table-column label="公司名称" width="150" prop="companyName">
        </el-table-column>
        <el-table-column label="部门" prop="department"> </el-table-column>
        <el-table-column label="职位" prop="position"> </el-table-column>
        <el-table-column label="主要成绩" prop="achievements">
        </el-table-column>
        <el-table-column label="离职原因" prop="resReason"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import { updateUser, getUser } from "@/api/system/user";
export default {
  data() {
    return {
      activeName: "basic",
      formObject: {
        dept: {
          deptName: "", //部门名称
        },
        password: "", //密码
        userName: "", //用户名
        staffStatus: "", //状态
        formObject: "", //工号
        sex: "", //性别
        nation: "", //民族
        idCard: "", //身份证号码
        nickName: "", //姓名
        birthdayTime: "", //出生日期
        marriage: "", //婚姻状况
        phonenumber: "", //联系电话
        hasChildren: "", //是否有子女
        political: "", //政治面貌
        bankNum: "", //银行卡号
        bank: "", //开户银行
        bankName: "", //开户名称
        email: "", //邮箱
        qq: "", //QQ号码
        weCharNum: "", //微信号码
        emergencyContact: "", //紧急联系人
        emergencyRelation: "", //紧急联系人关系
        emergencyTel: "", //紧急联系人电话
        empTime: "", //入职日期
        recruitmentSources: "", //招聘来源
        recommendedBy: "", //推荐人
        workAddress: "", //工作地点
        professionalTitle: "", //职称
        professionalQualification: "", //专业资格
        formalTime: "", //转正日期
        mailingAddress: "", //现通讯地址
        postalCode: "", //邮编
        idAddress: "", //身份证地址
        resTime: "", //离职日期
        resReason: "", //离职原因

        userMajorSocialRelationEntities: [],
        userWorkExperienceEntities: [],
        userEducationalEntities: [],
      },
      provinces: [
        {
          value: "bejing",
          label: "北京",
        },
        {
          value: "tianjin",
          label: "天津",
        },
      ],
      cities: [
        {
          value: "bejing",
          label: "北京",
        },
        {
          value: "tianjin",
          label: "天津",
        },
      ],
      counties: [
        {
          value: "bejing",
          label: "北京",
        },
        {
          value: "tianjin",
          label: "天津",
        },
      ],
      formObjectRules: {
        // customerName: [
        //   { required: true, message: "客户名称不能为空！", trigger: "blur" },
        // ],
        // name: [
        //   { required: true, message: "联系人姓名不能为空！", trigger: "blur" },
        // ],
      },
      staffStatusOptions: [
        {
          value: 1,
          label: "实习",
        },
        {
          value: 2,
          label: "试用期",
        },
        {
          value: 3,
          label: "已转正",
        },
        {
          value: 4,
          label: "试用不合格",
        },
        {
          value: 5,
          label: "已辞退",
        },
        {
          value: 6,
          label: "自愿离职",
        },
        {
          value: 7,
          label: "黑名单",
        },
      ],
    };
  },
  methods: {
    //获取详细信息
    getData(id) {
      getUser(id).then((res) => {
        console.log("res", res);
        if (res.code == 200) {
          let data = res.data;
          // 用户名
          this.formObject.userName = data.userName;
          // 姓名
          this.formObject.nickName = data.nickName;
          // 电话号码
          this.formObject.phonenumber = data.phonenumber;
          // 邮箱
          this.formObject.email = data.email;
        }
      });
    },
  },
  created() {
    this.getData(this.$route.query.userId);
  },
};
</script>
<style lang="scss" scoped>
// .add {
//   padding: 15px;
// }
.panel-title {
  font-size: 18px;
  color: #37474f;
  font-weight: 500;
  text-shadow: rgba(0, 0, 0, 0.15) 0 0 1px;
  margin-bottom: 20px;
}
::v-deep .el-form-item__content {
  margin-left: 0;
}
.main-responsible {
  font-size: 14px;
  font-weight: 550;
  color: #263238;
  position: relative;
  text-indent: 15px;
}
.top-form {
  // border: 1px solid #ccc;
  // padding: 20px;
  margin-bottom: 20px;
}
.detail-bg {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding-left: 10px;
  padding-right: 10px;
}
.detail {
  background: #f1f4f5;
  height: 100%;
}
.detail-container {
  width: 98%;
  margin: 1%;
  background: #fff;
  z-index: 3;
  position: relative;
  border-radius: 10px;
  padding: 20px;
}
</style>
